<template>
  <!-- 这是上面图表一的 -->
  <div
    id="main1"
    style="height: 100%; width: 100%; box-sizing: border-box; padding: 5px"
  ></div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      bigDataList: [],
    };
  },
  created() {
    this.getDataList();
  },
  mounted() {
    let self = this;
    const viewElem = document.body;
    const resizeObserver = new ResizeObserver(() => {
      // 此处放 当窗口大小发生变化时，想要让宽高自适应的图表的.resize()，除此处外其余都是固定写法，举例如下
    });
    resizeObserver.observe(viewElem);
  },
  methods: {
    // 请求接口，获取数据
    getDataList() {
      axios({
        method: "get",
        url: `${window.location.origin}/apigateway/api/dataset/1636686691518078977`,
        headers: {
          apiKey: "a92a7db58b234595951bb2b39fcf6430",
        },
      }).then((res) => {
        let data = [
          {
            value: res.data.data[0].total_on_duration_hours,
            name: "运转时长",
          },
          {
            value: res.data.data[0].total_fault_duration_hours,
            name: "故障时长",
          },
          {
            value: res.data.data[0].total_off_duration_hours,
            name: "停机时长",
          },
        ];
        this.bigDataList = data;
        this.initCharts();
        console.log(data, "11111111");
      });
    },
    // 柱状图
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main1"));
      // 实现相应式，跟随页面变化
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "设备状态",
          textStyle: {
            color: "#fff",
          },
        },
        // 提示框
        tooltip: {},
        // 图例
        // legend: {
        //   // selectedMode: false,
        //   x: "left",
        //   y: "center",
        //   itemGap: 30, //图例之间的间距
        //   padding: [0, 10, 0, 10],
        //   orient: "vertical", //图例的显示方式  默认横向显示 horizontal  vertical
        //   textStyle: {
        //     //图例中文字的样式
        //     color: "#fff",
        //     fontSize: 14,
        //     fontWeight: "600",
        //     padding: [0, 0, 0, 4], // 修改文字和图标距离
        //   },
        // },
        color: ["#91cd77", "#75bedc", "#f9c956", "#ef6567"], // 饼图各块颜色
        series: [
          {
            type: "pie",
            data: this.bigDataList,
            radius: ["40%", "70%"],
            center: ["60%", "50%"], // 饼图上下左右位置
          },
        ],
        label: {
          show: true,
          formatter: "{b} : {c} ({d}%)",
        },
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
